<!-- 装置激活 -->
<template>
  <div  class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0;">
    <div style="width:52%;min-width: 1100px">
      <div class="btn topSubmitBtn" style="display:flex;justify-content:flex-end">
        <el-button type="primary" @click="submit()">保存设置</el-button>
      </div>
      <div class="input-item"> 
        <div class="parameType">
          <div class="title">认证中心（建议在厂商配合下配置，非特殊情况不要修改）</div>
          <div class="content top1">
            <div class="certification">
              <el-form label-width="120px">
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="认证中心:">
                    <el-input v-model="deviceForm.CenterIP"  oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="32" style="width:280px"></el-input>
                  </el-form-item>
                  <p>请在服务商指导下填写正确的公网地址</p>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="企业编码:">
                    <el-input v-model="deviceForm.CorpUUID"  oninput="value=value.replace(/[^0-9]/g,'')" maxlength="16" style="width:280px"></el-input>
                  </el-form-item>
                  <p>必须和管理中心配置编码一一对应</p>
                </el-col>
              </el-form>
            </div>
          </div>
        </div>
        <!-- <div class="parameType">
          <div>
            <div class="title">网络审核参数设置（请勿使用海外代理服务器，如果您不清楚哪些是海外服务器请联系供应商）</div>
          </div>
          <div class="content">
            <div class="setUp">
                <p>系统采用正向代理模式来进行企业上网行为控制，由于涉及到上网代理功能，请不要使用国外服务器代理进行特殊代理上网。对于禁止的网站，请在"加速审计/域名阻断"对应界面配置策略</p>
            </div>
            <div class="setUpInput">
              <el-form label-width="120px">
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="服务器地址:">
                    <el-input v-model="deviceForm.ShadowServerIP"  oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="32"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="16">
                  <el-form-item label="认证ID:">
                    <el-input v-model="deviceForm.ShadowPwd"  oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="32"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="认证路径:">
                    <el-input v-model="deviceForm.ShadowPath" maxlength="32"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="本地端口:">
                    <el-input v-model="deviceForm.ShadowLocalPort" oninput="value=value.replace(/[^0-9]/g,'')" maxlength="5"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="交互ID:">
                    <el-input v-model="deviceForm.AlterId" oninput="value=value.replace(/[^0-9]/g,'')" maxlength="16"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
          </div>
        </div> -->
        <div class="parameType">
          <div style="display:flex;justify-content:space-between;border-bottom:1px solid #eceff5">
            <div class="title" style="border:none">企业信息（为了更好的为您做好售后服务，请仔细核对您的信息正确性）</div>
            <div>
              <p style="color:#aaa;font-size:12px;padding-left:50px;" :style="{color:`${this.dayColor || '#aaa'}`}"> {{Days}} 后到期</p>
            </div>
          </div>
          <div class="content">
            <div class="information">
              <el-form label-width="120px">
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="服务商名称:">
                    <el-input v-model="deviceForm.AgentName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="企业名称:">
                    <el-input v-model="deviceForm.CorpName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="用户级别:">
                    <el-input v-model="deviceForm.UserLevel" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="所在地区:">
                    <el-input v-model="deviceForm.Address" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="移动电话:">
                    <el-input v-model="deviceForm.Phone" disabled></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="QQ号码:">
                    <el-input v-model="deviceForm.QQ" disabled></el-input>
                  </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="联系邮箱:">
                    <el-input v-model="deviceForm.EMail" disabled></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="剩余点数:">
                    <el-input v-model="deviceForm.LeftPoints" disabled></el-input>
                  </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="创建时间:">
                    <el-input v-model="deviceForm.CreateTime" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <el-form-item label="有效日期:">
                    <el-input v-model="deviceForm.ValidTime" disabled></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :xs="24" :sm="24" :lg="24">
                    <p style="color:#aaa;font-size:12px;padding-left:50px;" :style="{color:`${this.dayColor || '#aaa'}`}"> {{Days}} 后到期。</p>
                </el-col> -->
                <!-- <el-col :xs="24" :sm="24" :lg="12">
                  <el-form-item label="用户等级:">
                    <el-input v-model="deviceForm.xxx" disabled></el-input>
                  </el-form-item>
                </el-col> -->
                <!-- <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="备注信息:">
                    <el-input v-model="deviceForm.Descp" disabled></el-input>
                  </el-form-item>
                </el-col> -->
              </el-form>
            </div>
          </div>
        </div>
        <div class="parameType">
          <div>
            <div class="title">权限控制</div>
          </div>
          <div class="content">
            <div class="setUpInput">
              <el-form label-width="150px">
                <el-col :xs="12" :sm="12" :lg="8">
                  <el-form-item>
                    <el-checkbox v-model="Right[0]" true-label="1" false-label="0" disabled>开通行为分析</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="8">
                  <el-form-item>
                    <el-checkbox v-model="Right[3]" true-label="1" false-label="0" disabled>开通AI助手</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="8">
                  <el-form-item>
                    <el-checkbox v-model="Right[1]" true-label="1" false-label="0" disabled>开通邮件推广</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="8">
                  <el-form-item>
                    <el-checkbox v-model="Right[4]" true-label="1" false-label="0" disabled>开通网络审计</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="8">
                  <el-form-item>
                    <el-checkbox v-model="Right[2]" true-label="1" false-label="0" disabled>开通亚马逊助手</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="8">
                  <el-form-item>
                    <el-checkbox v-model="Right[5]" true-label="1" false-label="0" disabled>开通精准资源</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="最大终端用户数量:">
                    <el-input v-model="deviceForm.MaxRegEmployeeCount" oninput="value=value.replace(/[^0-9]/g,'')" disabled maxlength="16"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="普通AI每日提问次数:">
                    <el-input v-model="deviceForm.MaxAICountPerDay" oninput="value=value.replace(/[^0-9]/g,'')" disabled maxlength="16"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="高级AI每日提问次数:">
                    <el-input v-model="deviceForm.MaxAI40CountPerDay" oninput="value=value.replace(/[^0-9]/g,'')" disabled maxlength="16"></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :xs="12" :sm="12" :lg="8">
                  <el-form-item label="每日最大邮件数量:">
                    <el-input v-model="deviceForm.MaxEMailCountPerDay" oninput="value=value.replace(/[^0-9]/g,'')" disabled maxlength="16"></el-input>
                  </el-form-item>
                </el-col> -->
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
    </el-row>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { connrequest } from '@/api/firstPage'
import { parseTime, formatTime } from '@/utils/index.js';
export default {
data() {
  return {
    deviceForm:{},
    Days: 0,
    dayColor:'#67C23A',
    Right: ['0','0','0','0','0','0']
  }
},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async getData() {
      const res = await connrequest('GetDCDInfo')
      let now = new Date().getTime()
      this.Days = this.dateTrans(res.Data.ValidTime*1000 - now)
      for (const key in res.Data) {
        res.Data['CreateTime'] = parseTime(res.Data['CreateTime'])
        res.Data['ValidTime'] = parseTime(res.Data['ValidTime'])
        res.Data['Address'] = `${res.Data['Province']}-${res.Data['City']}-${res.Data['Area']}`
        res.Data['MaxRegEmployeeCount'] = res.Data['MaxRegEmployeeCount'] === 0 ? '不控制' : res.Data['MaxRegEmployeeCount']
        res.Data['MaxAICountPerDay'] = res.Data['MaxAICountPerDay'] === 0 ? '不控制' : res.Data['MaxAICountPerDay']
        res.Data['MaxAI40CountPerDay'] = res.Data['MaxAI40CountPerDay'] === 0 ? '无权限' : res.Data['MaxAI40CountPerDay']
        res.Data['MaxEMailCountPerDay'] = res.Data['MaxEMailCountPerDay'] === 0 ? '智能控制' : res.Data['MaxEMailCountPerDay']
      }
      this.deviceForm = res.Data
      this.Right = res.Data.Right.split('') || ['0','0','0','0','0','0']
    },
    dateTrans(date) {
      let computeTime = date / 1000
      let year = Math.floor(computeTime / 86400 / 365);
      computeTime = computeTime % (86400 * 365);
      let month = Math.floor(computeTime / 86400 / 30);
      computeTime = computeTime % (86400 * 30);
      let day = Math.floor(computeTime / 86400);
      computeTime = computeTime  % 86400;
      if(year < 1 && month < 1 && (day <= 30)){
        this.dayColor = '#eec920'
      }
      if(year < 1 && month < 1 && (day <= 7)){
        this.dayColor = '#E6A23C'
      }
      if(year < 1 && month < 1 && (day <= 0)){
        this.dayColor = '#F56C6C'
      }
      return `${year > 0 ? year + '年' : ''}${month > 0 ? month + '个月' : ''}${day}天`;
    },
    async submit(){
      // this.$message.info('该功能还在测试阶段')
      // return
      let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      let domainName = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
      let character32 = /^[A-Za-z0-9]{1,32}$/
      let character64 = /^.{1,64}$/
      let number = /^[0-9]*$/
      if (this.deviceForm.CenterIP === '') {
        this.$message.error("认证中心不能为空");
        return false;
      }
      if (!reg.test(this.deviceForm.CenterIP) && !domainName.test(this.deviceForm.CenterIP)) {
        //  www.hunterxyz.com
        this.$message.error("认证中心格式错误");
        return false;
      }
      if (this.deviceForm.CorpUUID === '') {
        this.$message.error("企业编码不能为空");
        return false;
      }
      if (!character32.test(this.deviceForm.CorpUUID)) {
        this.$message.error("企业编码格式错误");
        return false;
      }
      if (!character64.test(this.deviceForm.ShadowServerIP) &&this.deviceForm.ShadowServerIP !== '' ) {
        this.$message.error("服务器地址不能超过64位字符");
        return false;
      }
      if (!character64.test(this.deviceForm.ShadowPwd) && this.deviceForm.ShadowPwd !== '') {
        this.$message.error("认证ID不能超过64位字符");
        return false;
      }
      if (!character64.test(this.deviceForm.ShadowPath) && this.deviceForm.ShadowPath !== '') {
        this.$message.error("认证路径不能超过64位字符");
        return false;
      }
      if ((!number.test(this.deviceForm.ShadowLocalPort) || this.deviceForm.ShadowLocalPort * 1 > 65535) && this.deviceForm.ShadowPath !== '') {
        this.$message.error("本地端口只能填1~65535的数字");
        return false;
      }
      if (!number.test(this.deviceForm.AlterId) && this.deviceForm.ShadowPath !== '') {
        this.$message.error("交互ID只能填数字");
        return false;
      }
      this.deviceForm.ShadowLocalPort = this.deviceForm.ShadowLocalPort * 1
      this.deviceForm.AlterId = this.deviceForm.AlterId * 1
      this.deviceForm.MaxRegEmployeeCount = this.deviceForm.MaxRegEmployeeCount === '不控制' ? 0 : this.deviceForm.MaxRegEmployeeCount
      this.deviceForm.MaxAICountPerDay = this.deviceForm.MaxAICountPerDay === '不控制' ? 0 : this.deviceForm.MaxAICountPerDay
      this.deviceForm.MaxAI40CountPerDay = this.deviceForm.MaxAI40CountPerDay === '无权限' ? 0 : this.deviceForm.MaxAI40CountPerDay
      this.deviceForm.MaxEMailCountPerDay = this.deviceForm.MaxEMailCountPerDay === '智能控制' ? 0 : this.deviceForm.MaxEMailCountPerDay
      const data = {
        Data:{
          ...this.deviceForm
        }
      }
      const res = await connrequest('SetDCDInfo', data)
      if(res.Status.StatusCode === 0) {
        this.$message.success('保存成功')
        this.getData()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
// .parmeType {
//   width: 850px;
// }

.parameType{
  margin: 10px 0;
  padding-bottom: 0;
}
.content {
  width: 900px;
  position: relative;
  margin: 5px 0;
  display: flex;
  flex-wrap: wrap;
  svg{
    font-size: 40px !important;
    margin-right: 20px;
  }
  ::v-deep .certification{
    .el-form-item{
      margin-bottom: 0;
    }
    .el-col{
      width: 1000px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      p{
        display:block;
        color: #aaa;
        font-size: 12px;
        padding-left: 20px;
        white-space: nowrap;
      }
    }
  }
  .setUp{
    display: flex;
    align-items: center;
    width: 100%;
    // margin-bottom: 20px;
    flex-grow: 1;
    i{
      margin-right: 20px;
    }
    p{
      font-size: 14px;
      color: red;
    }
  }
  .btn{
    position: absolute;
    right: 50px;
    bottom: 20px;
  }
}
.top1{
  flex-wrap: nowrap;
  // margin-bottom: 20px;
}
::v-deep.el-form-item{
  margin-bottom: 10px;
  label{
    font-weight: 500;
  }
}
</style>